<template>
	<view class="dynamic-dynamic-page">
<!--    banner-->
    <st-u-banner></st-u-banner>
<!--    宫格-->
    <view style="padding: 10rpx;" class="st-bg-color-white">
      <u-grid :col="gridCol" @click="click" :border="false">
        <u-grid-item v-for="(item,index) in gridDataList" :index="index" :key="index">
          <u-icon :name="item.icon" :size="item.size"></u-icon>
          <view class="grid-text">{{item.text}}</view>
        </u-grid-item>

      </u-grid>
    </view>


    <st-moment ref="moment"
               :group-flag="$config.dynamicGroupFlag"
               @avatarClick="avatarClick"
               @commentClick="commentClick"
               @rightMoreClick="rightMoreClick"
               @toAllStarClick="toAllStarClick"
               @toAllCommentClick="toAllCommentClick"
               @starAvatarClick="starAvatarClick"
               @commentAvatarClick="commentAvatarClick"
               @commentReplyClick="commentReplyClick"
               :rightSubTitleData="getSubTitleData">
    </st-moment>

    <u-action-sheet :list="moreShowData" v-model="moreShow" @click="moreShowClick"></u-action-sheet>
    <u-back-top :scroll-top="scrollTop" :bottom="350" :duration="300"></u-back-top>
<!--    发布按钮-->
    <uni-fab horizontal="right" :pattern="{buttonColor:'#000000'}" :popMenu="false" @fabClick="goToPublishPage"></uni-fab>
	</view>
</template>

<script>
import stUBanner from '../../../../../../../components/banner/web/components/app/uni-app/st-u-banner/st-u-banner.vue'
import stMoment from '../../../../../../../components/moment/web/components/app/uni-app/st-u-moment/st-u-moment.vue'
  export default {
  components:{ stUBanner,stMoment},
		data() {
			return {
			  gridCol: 3,
			  // 宫格数据
			  gridDataList: [
          {
            size: 46,
            icon: 'gift-fill',
            text: '玩盲盒',
            url: '',
            msg: '敬请期待'
          },
          {
            size: 46,
            icon: 'home-fill',
            text: '直租房',
            url: '',
            msg: '敬请期待'
          }
        ],
        // more click show
        moreShow: false,
        moreShowClickMoment: {},
        moreShowData:[
          {
            text: '举报'
          },
          {
            text: '不看他的动态'
          }
        ],
        eventChannel: null,
        scrollTop: 0,
			}
		},
		onLoad() {
    // 监听上一下页面发布成功的数据
      // 动态添加完成
      uni.$on('publishSuccess',(moment)=>{
        if(this.$refs.moment){
          this.$refs.moment.prepend(moment)
        }
      })
      // 评论添加完成
      uni.$on('commentPublishSuccess',(comment)=>{
        if (this.$refs.moment) {
          this.$refs.moment.prependComment(comment)
        }
      })
      // 评论的某一项的回复数 加 1
      uni.$on('commentItemReplyCountIncrement',(comment)=>{
        if (this.$refs.moment) {
          this.$refs.moment.commentItemReplyCountPlus(comment.comment,comment.momentId)
        }
      })
		},
    onUnload() {
      uni.$off('publishSuccess');
      uni.$off('commentPublishSuccess');
    },
    // 页面滚动 主要用于回到顶部
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    // 下拉刷新
    onPullDownRefresh(){
      this.$refs.moment.refreshMoment(()=>{uni.stopPullDownRefresh()})
    },
    onReachBottom(){
      this.$refs.moment.loadMoment()
    },
    onReady() {
    },
		methods: {

      // 副标题数据
      getSubTitleData(moment){
        let r = []
        r.push({
          icon: '',
          text: (moment.ext && moment.ext.birthDay) ? this.$u.timeFormat(new Date(moment.ext.birthDay), 'yyyy年') : ''
        })
        r.push({
          icon: '',
          text: moment.ext ? (moment.ext.nowAreaName||'') : ''
        })
        return r
      },
      // 宫格点击事件
      click(index){
        let item = this.gridDataList[index]
        if(item.url){
          uni.navigateTo({
            url: item.url
          })
          return
        }
        // 如果有消息属性 toast 提示
        if(item.msg){
          this.$u.toast(item.msg)
        }
      },
      // 动态左侧头像点击，跳转到用户详情
      avatarClick(moment){
        this.navigateToUserDetail(moment.ownerUserId)
      },
      // 点赞用户头像点击，跳转到用户详情
      starAvatarClick({starItem}){
        this.navigateToUserDetail(starItem.ownerUserId)
      },
      // 评论头像点击，跳转到用户详情
      commentAvatarClick({commentItem}){
        this.navigateToUserDetail(commentItem.ownerUserId)
      },
      // 点击动态评论单条回复，跳转到评论详情页
      commentReplyClick({commentItem}){
        let query = {momentId: commentItem.subjectId,commentId: commentItem.id}
        // 为了方便传参，这里使用 uview封装的路由跳转
        this.$u.route({
          url: '/pages/dynamic/dynamicCommentReplyDetail',
          params: query
        })
      },
      // 跳转到用户详情
      navigateToUserDetail(userId){
        uni.navigateTo({
          url: '/pages/index/userDetail?userId=' + userId
        })
      },
      // 动态右侧点击更多
      rightMoreClick(moment){
        this.moreShowClickMoment = moment
        this.moreShow = true
      },
      // 动态 三个小点事件 里面有action sheet 点击事件
      moreShowClick(index){
        this.moreShowData[index]
      },
      // 跳转到发布动态页面
      goToPublishPage(){
        this.checkLogin().then(()=>{
          uni.navigateTo({
            url: '/pages/dynamic/dynamicPublish'
          })
        })
      },
      // 跳转到动态评论页面
      commentClick(moment){
        this.checkLogin().then(()=>{
          uni.navigateTo({
            url: '/pages/dynamic/dynamicCommentPublish?momentId=' + moment.id
          })
        })
      },
      // 跳转到全部动态全部点赞列表
      toAllStarClick(moment){
        uni.navigateTo({
          url: '/pages/dynamic/dynamicStar?momentId=' + moment.id
        })
      },
      // 跳转到全部动态列表
      toAllCommentClick(moment){
        uni.navigateTo({
          url: '/pages/dynamic/dynamicComment?momentId=' + moment.id
        })
      }
		}
	}
</script>

<style scoped>
</style>
